<template>
  <div class="viphallOrder">
    <!-- 顶部 -->
    <div style="margin: 10px">
      <h4>贵宾厅订单-查询条件</h4>
    </div>
    <!-- 查询条件 -->
    <div class="middle">
      <el-form
        ref="form"
        size="mini"
        :inline="true"
        :model="inquiry"
        :rules="rules"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="inquiry.vipName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            oninput="value=value.replace(/[^\d]/g,'')"
            placeholder="请输入手机号"
            v-model="inquiry.vipPhone"
          >
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="会员卡号">
          <el-input v-model="inquiry.cardCode" prop="cardCord"
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"></el-input>
        </el-form-item> -->
        <el-form-item label="订单号">
          <el-input v-model="inquiry.oederNumber"></el-input>
        </el-form-item>
        <!--所属部门-->
        <!-- <el-form-item label="所属部门" class="qq">
          <el-select clearable size="mini" v-model="inquiry.department">
            <el-option v-for="item in departmentList" :key="item.deptId" :label="item.deptName" :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- 下单时间 -->
        <el-form-item label="下单日期">
          <el-date-picker
            style="width: 150px"
            v-model="CX.date1"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <span class="invoice-9">至 </span>
          <el-date-picker
            style="width: 150px"
            v-model="CX.date2"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 服务日期 -->
        <el-form-item label="服务日期">
          <el-date-picker
            style="width: 150px"
            v-model="CX.date3"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <span class="invoice-9">至 </span>
          <el-date-picker
            style="width: 150px"
            v-model="CX.date4"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <!--订单状态-->
        <el-form-item label="订单状态" class="qq">
          <el-select clearable size="mini" v-model="inquiry.orderStatus">
            <el-option
              v-for="item in orderStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 订单列表 -->
    <div class="table">
      <el-table
        size="mini"
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
        :data="dataList"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="orderShowNumber"
          label="订单号"
        ></el-table-column>
        <el-table-column width="100px" prop="ofCityName" label="城市">
        </el-table-column>
        <el-table-column width="100px" prop="ofPlaceName" label="机场">
        </el-table-column>
        <el-table-column width="100px" prop="ofTerminalName" label="所属航站楼">
        </el-table-column>
        <el-table-column width="100px" prop="loungeName" label="厅名称">
        </el-table-column>
        <el-table-column width="100px" prop="subscribeName" label="姓名">
        </el-table-column>
        <el-table-column width="100px" prop="subscribePhone" label="手机号">
        </el-table-column>

        <el-table-column width="150px" prop="subscribeNumber" label="预定人数">
        </el-table-column>
        <el-table-column width="130px" prop="createTime" label="下单时间">
        </el-table-column>
        <el-table-column
          width="130px"
          prop="subscribeDateTime"
          label="服务日期"
        >
         <template slot-scope="scope">
          {{processTime(scope.row.subscribeDateTime)}}
            
         </template>
        </el-table-column>
        <el-table-column width="130px" prop="orderStatus" label="订单状态">
          <template slot-scope="scope">
            <template v-if="scope.row.orderStatus == 'haspay'">已支付</template>

            <template v-if="scope.row.orderStatus == 'refund'">已退款</template>
            <template v-if="scope.row.orderStatus == 'unpaid'">未支付</template>
            <template v-if="scope.row.orderStatus == 'Cancellation'"
              >取消支付</template
            >

            <template v-if="scope.row.orderStatus == 'cancelpay'"
              >取消支付</template
            >
            <template v-if="scope.row.orderStatus == 'accomplish'"
              >已完成</template
            >
          </template>
        </el-table-column>
        <el-table-column width="130px" prop="orderSource" label="订单来源">
          <template slot-scope="scope">
            <template v-if="scope.row.orderSource == 'crm'">crm</template>
            <template v-if="scope.row.orderSource == 'program'"
              >小程序</template
            >
            <template v-if="scope.row.orderSource == 'android'">安卓</template>
            <template v-if="scope.row.orderSource == 'ios'">苹果</template>
          </template>
        </el-table-column>

        <el-table-column width="220px" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="getselectVipHallDetails(scope.row)"
              >查看详情</el-button
            >
            <el-button
              v-if="scope.row.status == 'paid' || scope.row.status == 'payd'"
              size="mini"
              type="primary"
              @click="cancelmethod(scope.row)"
              >取消订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 取消订单 -->
    <el-dialog
      title="取消订单"
      :visible.sync="cancelDialogVisible"
      :close-on-click-modal="false"
      width="30%"
      center
    >
      <span>确认取消订单吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getchargebackOrderViphall()"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
    <!-- 详情页弹窗 -->
    <el-dialog
      title="贵宾厅订单详情"
      :visible.sync="centerDialogVisible"
      :close-on-click-modal="false"
      width="60%"
      center
    >
     <!-- 客户信息 -->
      <table style="margin-top: 5px" v-if="JSON.stringify(infoData) !== '{}'">
        <span>
          <td class="td-header">客户信息</td>
        </span>
        <tr>
          <td class="td-1">会员姓名</td>
          <td class="td-2">{{ infoData.userInfo.userName }}</td>
          <td class="td-1">会员电话</td>
          <td class="td-2">{{ infoData.userInfo.phoneOne }}</td>
          <td class="td-1">会员卡号</td>
          <td class="td-2">{{ infoData.userCardInfo.cardNumber }}</td>
        </tr>
        <tr>
          <td class="td-1">下单日期</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.createTime }}</td>
          <td class="td-1">订单状态</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.orderStatus=='unpaid'?'待支付':  infoData.vipLoungeOrderInfo.orderStatus=='haspay'?'已支付': infoData.vipLoungeOrderInfo.orderStatus=='cancelpay'?'取消支付':infoData.vipLoungeOrderInfo.orderSource=='refund'?'已退款':infoData.vipLoungeOrderInfo.orderSource=='accomplish'?'已完成':'' }}</td>
          
          <td class="td-1">订单来源</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.orderSource=='program'?'小程序':  infoData.vipLoungeOrderInfo.orderSource=='crm'?'crm': infoData.vipLoungeOrderInfo.orderSource=='android'?'安卓':infoData.vipLoungeOrderInfo.orderSource=='ios'?'ios':''}}</td>
        </tr>
        <tr>
          <td class="td-1">卡名称</td>
          <td class="td-2">{{ infoData.userCardInfo.cardName }}</td>
        </tr>
      </table>
      <!-- 订单信息 -->
      <table style="margin-top: 5px" v-if="JSON.stringify(infoData) !== '{}'">
        <span>
          <td class="td-header">订单信息</td>
        </span>
        <tr>
          <td class="td-1">订单号</td>
          <td class="td-3">{{ infoData.vipLoungeOrderInfo.orderShowNumber }}</td>
          <td class="td-1">所属城市</td>
          <td class="td-3">{{ infoData.vipLoungeInfo.ofCityName }}</td>
          <td class="td-1">所属机场、车站</td>
          <td class="td-3">{{ infoData.vipLoungeInfo.ofPlaceName }}</td>
        </tr>
        <tr>
          <td class="td-1">所属航站楼</td>
          <td class="td-3">{{infoData.vipLoungeInfo.ofTerminalName }}</td>
          <td class="td-1">厅名称</td>
          <td class="td-3">{{ infoData.vipLoungeInfo.loungeName }}</td>
          <!-- <td class="td-1">证件号</td>
          <td class="td-3">{{ orderItemViphallVoList.idNumber }}</td> -->
        </tr>
        <tr>
          <td class="td-1">预约姓名</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.subscribeName }}</td>
          <td class="td-1">预约电话</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.subscribePhone }}</td>
          <td class="td-1">预约人数</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.subscribeNumber }}</td>
        </tr>
        <tr>
          <td class="td-1">预约日期</td>
          <td class="td-2">
            {{ infoData.vipLoungeOrderInfo.subscribeDateTime }}
          </td>
          <td class="td-1">实到人数</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.actualNumber }}</td>
          <td class="td-1">实到时间</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.actualDateTime }}</td>
        </tr>
        <tr>
          <td class="td-1">会员卡免费跟随人数</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.followNumber }}</td>
        
        </tr>
      </table>
      <!-- 支付信息 -->
      <table style="margin-top: 5px" v-if="JSON.stringify(infoData) !== '{}'">
        <span>
          <td class="td-header">支付信息</td>
        </span>
        <tr>
          <td class="td-1">销售价</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.sellingPrice }}</td>
          <td class="td-1">会员价</td>
          <td class="td-2">{{infoData.vipLoungeOrderInfo.memberPrice }}</td>
          <td class="td-1">订单总价</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.totalPrice }}</td>
        </tr>
        <tr>
          <td class="td-1">实际支付金额</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.actualPayPrice }}</td>
          <td class="td-1">支付方式</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.payType==null?'钱包支付': infoData.vipLoungeOrderInfo.payType=='sysMoney'?'钱包支付':infoData.vipLoungeOrderInfo.payType }}</td>
          <td class="td-1">积分金额</td>
          <td class="td-2">{{infoData.vipLoungeOrderInfo.integralAmount }}</td>
        </tr>
        <tr>
          <td class="td-1">金币金额</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.speciesAmount }}</td>
          <td class="td-1">预留款金额</td>
          <td class="td-2">{{ infoData.vipLoungeOrderInfo.moneyAmount }}</td>
        </tr>
        <tr>
          <td class="td-1">优惠卷金额</td>
          <td class="td-4">{{ infoData.vipLoungeOrderInfo.couponAmount }}</td>
        </tr>
      </table>
     

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "viphallOrder",

  data() {
    return {
      infoData:{},
      cancelbtn: true,
      cancelorderviphallId: "",
      // 确认取消弹窗
      cancelDialogVisible: false,
      // 表单验证规则
      rules: {
        phone: [
          {
            trigger: "change",
          },
        ],
        name: [
          {
            trigger: "change",
          },
        ],
        cardCord: [
          {
            trigger: "change",
          },
        ],
      },
      //分页
      pageSize: 10,
      pageNo: 1,
      pageTotal: 0,
      // 日期格式
      format: "yyyy-MM-dd",
      // 当前日期
      CX: {
        date1: new Date(new Date() - 24 * 60 * 60 * 1000 * 7)
          .toLocaleDateString()
          .replace(/\//g, "-"), //   日期时间
        date2: new Date(new Date()).toLocaleDateString().replace(/\//g, "-"),
        date3: "",
        date4: "",
      },
      // 所属部门列表
      departmentList: [],
      // 订单状态列表
      orderStatusList: [
        {
          value: "accomplish",
          label: "已完成",
        },
        {
          value: "cancelpay",
          label: "取消",
        },
        {
          value: "haspay",
          label: "已支付",
        },
        {
          value: "unpaid",
          label: "待支付",
        },
        {
          value: "refund",
          label: "已退款",
        },
      ],
      // 查询条件
      inquiry: {
        vipName: "", //会员姓名
        vipPhone: "", //手机号
        cardCode: "", //会员卡号
        oederNumber: "", //订单编号
        department: "", //所属部门
        vipName: "", //会员姓名
        vipName: "", //会员姓名
        department: "", //所属部门
        orderStatus: "", //订单状态
        date3: "", //服务日期前
        date4: "", //服务日期后
        serviceSource: "",
        orderSource: "",
      },
      // 弹窗显示隐藏
      centerDialogVisible: false,
      orderviphallId: "", //详情携带过来的订单号
      // 请求回来的数据
      dataList: [],
      // 请求回来的详情数据
      vipdetailsList: {
        paymentStatus: "",
      },
      // 订单详情操作记录
      operationRecord: {},
      orderstatus: "", //取消订单做判断
    };
  },
  watch: {
    orderstatus() {},
  },
  methods: {
    // 取消事件
    cancelmethod(row) {
      console.log(row.status);
      // if (row.status != "paid") {
      //   this.cancelbtn = false;
      //   if (res.code == "200") {
      //     (this.cancelDialogVisible = false),
      //       this.$message({
      //         message: "取消订单成功",
      //         type: "success",
      //       });
      //       this.getselectVipHallOrederList()
      //   }
      // } else {
      //   console.log("---", this.orderstatus);
      // }

      this.orderstatus = row.status;
      console.log(this.orderstatus);
      this.cancelDialogVisible = true;
      this.cancelorderviphallId = row.orderviphallId;
    },
    // 时间显示
    showcreatTime(val) {
      var val1 = val.split(".");
      var val2 = val1[0].split("T").join(" ");
      return val2;
    },
    //分页
    handleSizeChange(value) {
      this.pageSize = value;
      this.getselectVipHallOrederList();
    },
    handleCurrentChange(value) {
      this.pageNo = value;
      this.getselectVipHallOrederList();
    },

    search() {
      this.getselectVipHallOrederList();
    },

    // 订单取消
    getchargebackOrderViphall() {
      this.$axios
        .getchargebackOrderViphall({
          orderviphallId: this.cancelorderviphallId,
        })
        .then((res) => {
          // 只要是已经支付的时候才能取消订单  其他都不可以 取消订单  取消按钮
          // 如果你不是
          if (res.code == "200") {
            (this.cancelDialogVisible = false),
              this.$message({
                message: "取消订单成功",
                type: "success",
              });
            this.getselectVipHallOrederList();
          }
        });
    },
      processTime(row){
        let str  = row.split(' ')
        return str[0]
      },
    // 贵宾厅列表接口
    getselectVipHallOrederList() {
      this.$axios
        .getVipLoungeOrderList({
          subscribeName: this.inquiry.vipName,
          subscribePhone: this.inquiry.vipPhone,
          orderShowNumber: this.inquiry.oederNumber,
          orderStatus: this.inquiry.orderStatus,
          subscribeDateTimeMin: this.CX.date3,
          subscribeDateTimeMax: this.CX.date4,
          createDateTimeMin: this.CX.date1,
          createDateTimeMax: this.CX.date2,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            console.log(res.data);
            this.dataList = res.data.records;
            this.pageTotal = res.data.total;
          }
        });
    },
    // 贵宾厅详情接口
    getselectVipHallDetails(row) {
      console.log(row.orderId);
      this.orderviphallId = row.id;
      this.$axios
        .getVipLoungeOrderInfo({
          id: Number(this.orderviphallId),
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.centerDialogVisible = true;
            this.infoData = res.data
          }
        });
    },
  },
  mounted() {
    this.getselectVipHallOrederList();
    // 调用部门列表
  },
};
</script>
<style scoped>
.middle {
  display: flex;
  margin-top: 20px;
  margin-left: 10px;
}

.table {
  margin-left: 20px;
}

/* 弹窗css */
.td-header {
  height: 20px;
  color: black;
  font-weight: 500;
}

.td-1 {
  width: 150px;
  height: 40px;
  background-color: #faffff;
  border: 0.5px solid #ebeef5;

  /* border-right: 0.5px solid #bcbec6;
  border-bottom: 0.5px solid #bcbec6; */
}

.td-2 {
  width: 300px;
  border: 0.5px solid #ebeef5;
}

.td-3 {
  width: 450px;
  border: 0.5px solid #ebeef5;
}

.td-4 {
  width: 450px;
  border: 0.5px solid #ebeef5;
}

.td-5 {
  width: 337px;
  border: 0.5px solid #ebeef5;
  background-color: #faffff;
}

.td-6 {
  width: 337px;
  border: 0.5px solid #ebeef5;
}

.td-7 {
  height: 25px;
  width: 337px;
  border: 0.5px solid #ebeef5;
}
</style>